<!-- <template>
  <div ref="chartRef" style="width: 100%; height: 600px;"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import chinaMapData from './echarts-mapJson-master/china.json'; // 确保路径正确
import beijingMapData from './echarts-mapJson-master/beijing.json'; // 北京地图数据
import shanghaiMapData from './echarts-mapJson-master/shanghai.json'; // 上海地图数据

// 注册地图
echarts.registerMap('china', chinaMapData);
echarts.registerMap('beijing', beijingMapData);
echarts.registerMap('shanghai', shanghaiMapData);

// 使用ref来引用DOM元素
const chartRef = ref(null);
let chartInstance = null;

// 初始化图表
const initChart = () => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value);

    const option = {
      title: {
        text: '中国地图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          let content = params.name + '<br/>';
          if (params.seriesName === 'Beijing' || params.seriesName === 'Shanghai') {
            content += '这是一段关于该城市的描述。<br/>这里是更多详情。<br/>';
            content += '<a href="http://example.com" target="_blank">点击这里了解更多</a>';
          } else {
            content += '这是一段关于该区域的描述。';
          }
          return content;
        }
      },
      visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],
        calculable: true
      },
      series: [
        {
          name: 'China',
          type: 'map',
          mapType: 'china',
          roam: true,
          label: {
            show: true
          },
          itemStyle: {
            areaColor: '#eee',
            borderColor: '#333'
          },
          emphasis: {
            label: {
              color: '#fff'
            },
            itemStyle: {
              areaColor: 'rgba(255,255,0,0.8)'
            }
          },
          data: chinaMapData.features.map(feature => ({
            name: feature.properties.name,
            value: Math.round(Math.random() * 1000) // 随机生成的值，用于演示
          }))
        }
      ]
    };

    // 使用配置项生成图表
    chartInstance.setOption(option);

    // 添加点击事件处理程序以实现省市区下钻
    chartInstance.on('click', function (params) {
      if (params.seriesName === 'China') {
        switch (params.name) {
          case '北京市':
            loadCityDetail('Beijing', 'beijing');
            break;
          case '上海市':
            loadCityDetail('Shanghai', 'shanghai');
            break;
          default:
            // 对于其他省份，你可以选择加载更详细的数据或不处理
            console.log(`Clicked on province: ${params.name}`);
        }
      }
    });
  }
};

// 加载城市详细信息的方法
const loadCityDetail = (cityName, mapType) => {
  const cityOption = {
    series: [
      {
        name: cityName,
        type: 'map',
        mapType: mapType,
        selectedMode: 'single',
        rippleEffect: {
          brushType: 'stroke'
        },
        label: {
          show: true
        },
        itemStyle: {
          areaColor: '#d9ead3'
        },
        emphasis: {
          label: {
            color: '#fff'
          },
          itemStyle: {
            areaColor: 'rgba(255,255,0,0.8)'
          }
        },
        data: []
      }
    ]
  };
  chartInstance.setOption(cityOption);
};

// 组件挂载后初始化图表
onMounted(() => {
  initChart();
});

// 组件卸载前销毁图表实例
onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>
/* 样式 */
</style> -->

<template>  
  <div>  
    <!-- 新增 编辑 详情 -->
1111111
  </div>  
</template>  

<script setup>  

</script>  

<style scoped>  
/* Add styles specific to boxWrapper here */  
</style>